import React,{ Component } from 'react';


class Demo2 extends Component{
    constructor(props){
       super(props);
       this.state = {
           value: props.value
       }
    }

    handleChange = (e)=>{
        this.setState({
            value:e.target.value.replace(/\D/g, '')
        })
    };
    handleClick = () =>{
        const value = ++this.nameValue.value;
        console.log(value);
        this.setState({
            value,
        })
    };
    handleClick01 = () => {
        console.log(this.nameValue.value)
        const value2 = --this.nameValue.value;
        console.log(value2);
        this.setState({
            value2,
        })

    }

    render() {
        return (
            <div>
                <button onClick = {this.handleClick01}>-</button>
                <input type="text"
                value={this.state.value}
                       onChange={this.handleChange}
                       ref = {ref => this.nameValue = ref}
                />
                <button onClick = {this.handleClick}>+</button>
            </div>
        )
    }
}




class  Demo1 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value: props.value,
        }
    }

    handleChange = (e)=>{
        this.setState({
            value:e.target.value.replace(/\D/g, '')
        })
    };

    render(){
        return(
            <div>
                {/*受控input*/}
                <label htmlFor="">受控input（只能输入数字）</label>
                <input type="text" value={this.state.value} onChange={this.handleChange} />
                <br/>
                {/*不受控input*/}
                <label htmlFor="">不受控input</label>
                <input type="text"/>

                <br/>
                <Demo2 />

                <br/>
            </div>
        )
    }
}
export default Demo1;